<template>
  <div>
    <div class="box clear">
      <div class="left fleft">
        <div class="top border">
          <div class="fleft top_ent">
            <strong>激活企业总数</strong>
            <span :style="{color:'#409eff',}">
              &nbsp;
              <strong class="strong_num">{{dataList.activeCompanyNum}}</strong>
            </span>&nbsp;家
          </div>
          <div class="fleft top_ent">
            <strong>申报企业总数</strong>
            <span :style="{color:'#409eff',}">
              &nbsp;
              <strong class="strong_num">{{dataList.declareCompanyNum}}</strong>
            </span>&nbsp;家
          </div>
        </div>
        <div class="bottom border clear">
          <h3>最新申报企业</h3>
          <transition name="el-zoom-in-top">
            <div v-if="declareData.length>0" v-show="tshow" class="inner fleft">
              <div class="inner-box">
                <div>
                  <p>{{orderObj.addr}}</p>
                  <p>{{orderObj.cont}}</p>
                  <p>{{orderObj.num}}</p>
                </div>
              </div>
            </div>
          </transition>
        </div>
      </div>
      <div class="right fright">
        <div class="top border">
          <h4 :style="{margin:'10px'}">最新激活企业列表</h4>
          <div v-if="areaList.length>0" class="right_hand">
            <div>
              <p style="color: #333;">企业名称</p>
              <p
                v-for="(list,i) in areaList.slice(0,4)"
                :key="i"
                style="color: #888;margin:0;line-height:30px;"
              >{{list.companyHsName}}</p>
            </div>
            <div>
              <p style="color: #333;">联系人</p>
              <p
                v-for="(list,i) in areaList.slice(0,4)"
                :key="i"
                style="color: #888;margin:0;line-height:30px;"
              >{{list.contactsName}}</p>
            </div>
            <div>
              <p style="color: #333;">联系电话</p>
              <p
                v-for="(list,i) in areaList.slice(0,4)"
                :key="i"
                style="color: #888;margin:0;line-height:30px;"
              >{{list.contactsPhone}}</p>
            </div>
          </div>
        </div>
        <div class="center border">
          <div
            :style="{lineHeight:'50px',borderBottom:'1px solid #8c939d',fontWeight:'600',paddingLeft:'10px'}"
          >企业激活数、企业申报数日统计</div>
          <div style="height:500px;margin-top:20px;" id="line_stack"></div>
        </div>
        <div class="bottom border">
          <div
            :style="{lineHeight:'50px',borderBottom:'1px solid #8c939d',fontWeight:'600',paddingLeft:'10px'}"
          >辖区企业总数、企业激活数、申报数统计</div>
          <div style="height: 320px;margin-top:20px;" id="line_juris"></div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {
  getData,
  areaData,
  areaDataStack,
  areaDataDeclare
} from "@/api/analysis";
import { error } from "util";
export default {
  data() {
    return {
      dataList: {},
      dataListJuris: {},
      tableData: [],
      axisData: [],
      areaList: [],
      declareData: [],
      valList: [],
      orderObj: {},
      tshow: true
    };
  },
  mounted() {
    this.line_stack();
    this.line_juris();
    this.getDataList();
    this.areaDataList();
    this.areaDeclare();
  },
  methods: {
    //订单总数，总金额
    getDataList() {
      getData().then(res => {
        if (res.code == 0) {
          this.dataList = res.data;
        } else {
          this.$notify.error(res.msg);
        }
      });
    },
    //最新激活企业列表
    areaDataList() {
      areaData().then(res => {
        if (res.code == 0) {
          this.areaList = res.data;
        } else {
          this.$notify.error(res.msg);
        }
      });
    },
    //最新申报企业列表
    areaDeclare() {
      areaDataDeclare()
        .then(res => {
          if (res.code == 0) {
            this.declareData = res.data;
            let arr = res.data;
            let timer = null;
            let num = 0;
            let that = this;
            let obj = {};
            obj.index = 1;
            obj.cont = arr[0].contactsName;
            obj.addr = arr[0].companyHsName;
            obj.num = arr[0].contactsPhone;
            that.orderObj = obj;
            clearInterval(timer);
            timer = setInterval(function() {
              num++;
              that.tshow = !that.tshow;
              setTimeout(function() {
                if (num == arr.length) {
                  num = 0;
                }
                let obj = {};
                obj.index = num + 1;
                obj.cont = arr[num].contactsName;
                obj.addr = arr[num].companyHsName;
                obj.num = arr[num].contactsPhone;
                that.orderObj = obj;
                that.tshow = !that.tshow;
              }, 200);
            }, 3000);
          } else {
            console.log(res.msg);
          }
        })
        .catch(err => {
          console.log(err);
        });
    },
    //企业激活数，申报数日统计
    line_stack() {
      //请求数据
      areaDataStack().then(res => {
        if (res.code == 0) {
          let timeData = [];
          let companyNum = [];
          let orderNum = [];
            timeData = res.data.dateList;
            res.data.resultActive.forEach(function (el, index) {
                companyNum.push(el.num)
            })
            res.data.resultDeclare.forEach(function (el, index) {
                orderNum.push(el.num)
            })
          // 基于准备好的dom，初始化echarts实例
          let myChart = this.$echarts.init(
            document.getElementById("line_stack")
          );
          // 绘制图表
          let option = {
            title: {
              text: ""
              //   subtext: "纯属虚构"
            },
            tooltip: {
              trigger: "axis",
              axisPointer: {
                type: "cross",
                label: {
                  backgroundColor: "#283b56"
                }
              }
            },
            legend: {
              data: ["激活数（家）", "申报数（家）"]
            },
            dataZoom: {
              show: false,
              start: 0
            },
            xAxis: [
              {
                type: "category",
                boundaryGap: true,
                data: timeData
              },
              {
                type: "category",
                boundaryGap: true,
                data: timeData
              }
            ],
            yAxis: [
              {
                type: "value",
                scale: true,
                name: "激活数（家）",
                // max: 10000,
                min: 0,
                boundaryGap: [0.2, 0.2]
              },
              {
                type: "value",
                scale: true,
                name: "申报数（家）",
                // max: 3000,
                min: 0,
                boundaryGap: [0.2, 0.2]
              }
            ],
            series: [
              {
                name: "激活数（家）",
                type: "bar",
                xAxisIndex: 1,
                yAxisIndex: 1,
                data: companyNum
              },
              {
                name: "申报数（家）",
                type: "line",
                data: orderNum
              }
            ]
          };

          myChart.setOption(option);
        } else {
          this.$notify.error(res.msg);
        }
      });
    },
    line_juris() {
      getData().then(res => {
        if (res.code == 0) {
          this.dataList = res.data;
          let val = [{ value: 65 }, { value: 45 }, { value: 25 }];
          let nameList = [];
          let obj1 = {};
          let obj2 = {};
          let obj3 = {};
          obj1.name = "辖区企业总数:" + this.dataList.areaCompanyNum +"家";
          obj2.name = "企业激活数:" + this.dataList.activeCompanyNum +'家';
          obj3.name = "申报数统计:" + this.dataList.declareCompanyNum + "家";
          nameList.push(obj1);
          nameList.push(obj2);
          nameList.push(obj3);

          for (let i = 0; i < val.length; i++) {
            val[i].name = nameList[i].name;
          }
          // this.valList = val;

          let myChart = this.$echarts.init(
            document.getElementById("line_juris")
          );
          let option = {
            title: {
              /*text: '漏斗图',*/
              /*subtext: '纯属虚构'*/
            },

            toolbox: {},
            legend: {
              data: ["辖区企业总数", "企业激活数", "申报数统计"]
            },
            calculable: true,
            series: [
              {
                name: "漏斗图",
                type: "funnel",
                left: "0%",
                top: 20,
                //x2: 80,
                bottom: 60,
                width: "100%",
                height: 240,
                min: 0,
                max: 100,
                minSize: "0%",
                maxSize: "140%",
                sort: "descending",
                gap: 2,
                label: {
                  normal: {
                    show: true,
                    position: "inside"
                  },
                  emphasis: {
                    textStyle: {
                      fontSize: 20
                    }
                  }
                },
                labelLine: {
                  normal: {
                    length: 10,
                    lineStyle: {
                      width: 1,
                      type: "solid"
                    }
                  }
                },
                itemStyle: {
                  normal: {
                    borderColor: "#fff",
                    borderWidth: 1
                  }
                },
                data: val
              }
            ]
          };

          myChart.setOption(option);
        } else {
          this.$notify.error(res.msg);
        }
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.box {
  max-width: 1200px;
  margin: 20px;
  border: 1px solid #eee;
  border-radius: 6px;
  padding: 20px;
  .left {
    width: calc(100% - 470px);
    margin-right: 20px;
    .border {
      border: 1px solid #87b4e4;
      box-shadow: 0px 0px 10px #87b4e4;
      border-radius: 8px;
    }
    .top {
      box-shadow: 0px 0px 10px #87b4e4;
      height: 20vh;
      margin-bottom: 20px;
      .top_ent {
        width: 50%;
        text-align: center;
        font-weight: bold;
        line-height: 20vh;
        font-size: 25px;
      }
    }
    .bottom {
      min-height: calc(70vh + 20px);
      background: url("../../assets/area-chart-bg.png") no-repeat center #030119;
      -webkit-background-size: cover;
      background-size: cover;
      h3 {
        color: #fff;
        text-indent: 20px;
      }
      .inner {
        border-top-right-radius: 4px;
        border-bottom-right-radius: 4px;
        color: #e3e3e3;
        background: rgba(238, 238, 238, 0.3);
        .inner-box {
          padding: 20px;
          margin-top: 20px;
        }
      }
    }
  }
  .right {
    width: 450px;

    .border {
      border: 1px solid #87b4e4;
      box-shadow: 0px 0px 10px #87b4e4;
      border-radius: 8px;
      .right_hand {
        display: flex;
        height: 30%;
        justify-content: space-around;
        border-top: 1px solid #e6e6e6;
        font-size: 13px;
        font-weight: 600;
        padding: 10px;
      }
    }
    .top {
      /*height: 30vh;*/
    }
    .center {
      margin-top: 20px;
      margin-bottom: 20px;
      /*height: 30vh;*/
    }
    .bottom {
      position: relative;
    }
  }
}

.tips {
  position: absolute;
  bottom: 50%;
  left: 50%;
  margin-left: -80px;
  .num {
    height: 56px;
    padding-left: 10px;
    padding-right: 10px;
    color: #fdfdfd;
    line-height: 56px;
    font-size: 50px;
    border-bottom-left-radius: 4px;
    border-top-left-radius: 4px;
    background: rgba(30, 106, 216, 0.2);
  }
  .text {
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;

    span {
      display: inline-block;
      line-height: 30px;
      text-indent: 20px;
    }
    em {
      font-style: normal;
    }
    p {
      margin: 0;
      padding: 0;
      text-align: center;
      padding-right: 20px;
      padding-left: 20px;
    }
    height: 56px;
    color: #e3e3e3;
    background: rgba(238, 238, 238, 0.3);
  }
}
@import "@/styles/common.scss";
</style>